<template lang="html">
  <div class="content">
    <div class="user_box">
      <div class="user_info">
        <div class="user_icon">
          <img :src="result.headImg" alt="">
        </div>
        <div class="user_des">
          <div class="user_name">
            {{ result.nickName}}
          </div>
          <div class="user_time">
            {{ result.createDate}}
          </div>
        </div>
      </div>
      <div class="user_img">
        <img :src="imgs" alt=""  v-for='imgs in result.imgs'>
      </div>
      <div class="user_content">
        {{ result.content }}
      </div>
      <div class="favorite">
        <div class="favorite_icon" v-if='flag'>
          <img @click='gray()' src="../../static/img/zan3.png" alt="">
          {{ result.favoriteCount }}
        </div>
        <div class="favorite_icon" v-else>
          <img @click='red()' src="../../static/img/zan2.png" alt="">
          {{ result.favoriteCount + 1 }}
        </div>
        <div class="favorite_shoucang" v-if='pro'>
          <img @click='grayheart()' src="../../static/img/heart2.png" alt="">
          {{ result.isFavorite }}
        </div>
        <div class="favorite_shoucang" v-else>
          <img @click='redheart()' src="../../static/img/heart3.png" alt="">
          {{ result.isFavorite + 1 }}
        </div>
      </div>
    </div>
    <div class="pinglun">
      全部评论(1)
    </div>
    <div class="others" v-for='info in result.data'>
      <div class="user_box">
        <div class="user_info">
          <div class="user_icon">
            <img :src="info.headImg" alt="">
          </div>
          <div class="user_des">
            <div class="user_name">
              {{ info.nickName}}
            </div>
            <div class="user_time">
              {{ info.createDate}}
            </div>
          </div>
        </div>
      </div>
      <div class="others_content" style="marginLeft:16%">
        {{ info.content }}
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      result: {},
      flag: true,
      pro: true
    }
  },
  created() {
    this.axios.get('../static/data/xiangqing.json').then(data=> {
      return this.result = data.data.show;
      console.log(this.result);
    })
  },
  methods: {
    gray() {
      this.flag = false;
    },
    red() {
      this.flag = true;
    },
    grayheart() {
      this.pro = false;
    },
    redheart() {
      this.pro = true;
    }
  }
}
</script>

<style lang="css">
* {
  margin: 0;
  padding:0;
}
.content {
  width: 100%;
  color: #999;
  font-size: .25rem;
  margin-top: .8rem;
}
.content .user_box {
  width: 100%;
  display: flex;
  flex-direction: column;
  /*justify-content: center;*/
  margin: 0 auto;
}
.content .user_box .user_info {
  width: 100%;
  height: .8rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: .2rem;
  margin-bottom: .3rem;
}
.content .user_info .user_icon {
  width: 16%;
}
.content .user_info .user_icon img {
  width: 70%;
  height: 70%;
  border-radius: 50%;
  vertical-align: middle;
}
.content .user_info .user_des {
  width: 80%;
  font-size: .2rem;
}
.content .user_des .user_time {
  color: #999;
}
.content .user_img {
  width: 100%;
  /*height: 100%;*/
}
.content .user_img img{
  width: 100%;
  height: 100%;
}
.content .user_content {
  width: 92%;
  margin-left: 4%;
  margin-top: .3rem;
  line-height: .3rem;
}
.content .favorite {
  width: 100%;
  height: .8rem;
  display: flex;
  align-items: center;
  justify-content: right;
}

.content .favorite_icon {
  width: 80%;
  text-align: right;
  /*background: url('../../static/img/zan3.png') no-repeat;
  background-position: 96% 0;*/
}
/*.favorite .zan {
  background: url('../../static/img/zan2.png') no-repeat;
  background-position: 96% 0;
}*/
.content .favorite_shoucang {
  width: 20%;
  text-align: center;
}
.content .pinglun {
  width: 100%;
  height: .8rem;
  line-height: .8rem;
  border-top: .01rem solid #999;
  border-bottom: .01rem solid #999;
}
.content .others {
  padding-bottom: 1rem;
}
.others_content {
  line-height: .3rem;
  margin-bottom: .3rem
}
</style>
